<template>
  <div class="box-lei">
    <div class="button" style="margin: 10px 10px 10px 0">
      <el-button @click="bianji" style="float: right">增加分类</el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%" v-loading="loading">
      <el-table-column prop="name" label="分类名称"> </el-table-column>
      <el-table-column prop="id" label="分类id"> </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- <div>
            <el-button size="mini">编辑</el-button>
            <el-button size="mini" type="danger">删除</el-button>
          </div> -->

          <span style="color: #fa7d3c" @click="bianji(scope.row)">编辑</span>
          <span style="color: red; margin-left: 10px" @click="delet(scope.row)"
            >删除</span
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="增加分类"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form label-width="70px">
        <el-form-item label="增加类名">
          <el-input v-model="name" placeholder="请输入类名" />
        </el-form-item>
        <!-- <el-form-item label="类ID">
          <el-input v-model="info.id" placeholder="请输入id" disabled />
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addlist">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible1"
      width="30%"
      :before-close="handleClose"
    >
      <span>是否删除</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="deleKist">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="修改分类"
      :visible.sync="dialogVisible3"
      width="30%"
      :before-close="handleClose"
    >
      <el-form label-width="70px">
        <el-form-item label="增加类名">
          <el-input v-model="info.name" placeholder="请输入类名" />
        </el-form-item>
        <!-- <el-form-item label="类ID">
          <el-input v-model="info.id" placeholder="请输入id" disabled />
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible3 = false">取 消</el-button>
        <el-button type="primary" @click="edit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible3: false,
      dialogVisible1: false,
      loading: true,
      dialogVisible: false,
      info: {
        name: "",
        id: 0,
      },
      tableData: [
        {
          name: "我是内容",
          id: "1",
        },
        {
          name: "我是分类",
          id: "2",
        },
        {
          name: "我是分类",
          id: "3",
        },
      ],
      name: "",
      idlist: {
        id: 0,
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    edit() {
      //   console.log(this.info);
      this.$axios.put("/admin/updateCf/", this.info).then((res) => {
        console.log(res);
        if (res.status === 200) {
          this.$message.success("修改成功");
          this.getList();
          this.dialogVisible3 = false;
        } else {
          this.$message.error("失败");
        }
      });
    },
    deleKist() {
      this.$axios
        .delete("/admin/updateCf/", { params: this.idlist })
        .then((res) => {
          console.log(res);
          if (res.status === 200) {
            this.$message.success("删除成功");
            this.dialogVisible1 = false;
            this.getList();
          } else {
            this.$message.error("失败");
          }
        });
    },
    delet(v) {
      console.log(v);
      this.idlist.id = v.id;
      this.dialogVisible1 = true;
    },
    addlist() {
      let quer = {
        name: this.name,
      };
      this.$axios
        .post("/admin/updateCf/", quer)
        .then((res) => {
          console.log(res);
          this.dialogVisible = false;
          this.$message.success("添加成功");
          this.getList();
        })
        .catch(() => {
          this.$message.error("失败");
        });
    },
    getList() {
      this.$axios.get("/article/types/").then((res) => {
        console.log(res.data);
        this.tableData = res.data;
        this.loading = false;
      });
    },
    handleClose(done) {
      //   console.log(done);
      this.dialogVisible = false;
      this.dialogVisible1 = false;
      this.dialogVisible3 = false;
    },
    bianji(v) {
      if (v.id === undefined) {
        this.dialogVisible = true;
        return;
      }
      this.dialogVisible3 = true;
      //   this.info = v;
      this.info.name = v.name;
      this.info.id = v.id;
      console.log(this.info);
    },
  },
};
</script>
<style lang="scss" scoped>
.box-lei {
  width: 100%;
  height: 100%;
  background-color: #fff;
  .fenye {
    margin: 0 auto;
    width: 60%;
    margin-top: 10px;
  }
}
</style>